<h1>Todos</h1>

<button (click)="todosRepo.updateFilter('COMPLETED')">Complete</button>
<button (click)="todosRepo.updateFilter('ACTIVE')">Active</button>
<button (click)="todosRepo.updateFilter('ALL')">All</button>

<ul>
  @for (todo of todosRepo.visibleTodos$ | async; track todo) {
    <li>
      <input
        type="checkbox"
        (change)="todosRepo.updateCompleted(todo.id)"
        [checked]="todo.completed"
      />
      {{ todo.title }}
    </li>
  }
</ul>

<input
  #todo
  placeholder="title"
  (keydown.enter)="todosRepo.addTodo(todo.value)"
/>

<h2 style="margin-top: 20px">Completed</h2>
<ul>
  @for (todo of todosRepo.selectByCompletedState(true) | async; track todo) {
    <li>
      <input
        type="checkbox"
        (change)="todosRepo.updateCompleted(todo.id)"
        [checked]="todo.completed"
      />
      {{ todo.title }}
    </li>
  }
</ul>
